<template>
    <div class="brand-say">
        <div class="brand-banner">
            <zsdx-brand :show-more="false" :list="brandShowList"></zsdx-brand>
        </div>

        <div class="brand-list">
            <div
                v-for="(item, index) in brandCloseList"
                :key="index"
                class="brand-item"
                @click="fnShowItem(item)"
            >
                <div
                    class="item-cover"
                    :style="'background-image: url(' + item.brand_cover + ')'"
                ></div>
                <div class="item-info">
                    <p class="item-title ellipsis">
                        {{ item.brand_title }}
                    </p>
                    <p class="item-desc">
                        <span>{{ item.company_name }}</span>
                        <span class="industry">{{
                            item.sub_category_title
                        }}</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="cooperation-container">
            <zsdx-cooperation></zsdx-cooperation>
        </div>

        <!-- 弹窗展示 -->
        <div
            v-if="showBrandDialog"
            class="brand-dialog-container"
            @click.prevent.self="showBrandDialog = false"
        >
            <div class="brand-dialog">
                <div class="brand-header">
                    <div
                        class="brand-cover-img"
                        :style="
                            'background-image: url(' +
                                dialogData.brand_cover +
                                ')'
                        "
                    ></div>
                    <div class="brand-info-wrap">
                        <p class="brand-title ellipsis-2">
                            {{ dialogData.brand_title }}
                        </p>
                        <p class="brand-desc ellipsis">
                            {{ dialogData.company_name }}
                        </p>
                        <p class="tags ellipsis">
                            {{ dialogData.sub_category_title }}
                        </p>
                    </div>
                </div>

                <div class="brand-content">
                    {{ dialogData.brand_info }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import zsdxBrand from '@/components/index/zsdx-brand'
import zsdxCooperation from '@/components/index/zsdx-cooperation'

import { geBrandList } from '@/api/index'
export default {
    name: 'BrandSay',
    components: {
        zsdxBrand,
        zsdxCooperation
    },
    data() {
        return {
            showBrandDialog: false,
            brandShowList: [],
            brandCloseList: [],
            dialogData: {
                brand_cover: '',
                brand_title: '',
                company_name: '',
                sub_category_title: ''
            }
        }
    },
    created() {
        if (!process.server) {
            this.fnGetBrandList({
                status: 1
            })

            this.fnGetBrandList({
                status: -1,
                page_size: 100,
                page_id: 1
            })
        }
    },
    methods: {
        fnShowItem(item) {
            this.showBrandDialog = true
            this.dialogData = item
        },
        fnGetBrandList(parmas) {
            geBrandList(parmas)
                .then((res) => {
                    if (parmas.status == 1) {
                        this.brandShowList = res.data.list
                    } else {
                        this.brandCloseList = res.data.list
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        }
    }
}
</script>

<style lang="less" scoped>
.brand-say {
    background: #030e1f;
    min-height: calc(100vh - 0.8rem);
    .brand-banner {
        border: 1px solid transparent;
    }

    .brand-list {
        padding: 0 0.24rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .brand-item {
            width: 3.4rem;
            height: 5.68rem;
            margin-bottom: 0.2rem;
            .item-cover {
                width: 3.42rem;
                height: 4.54rem;
                background-color: #030e1f;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }
            .item-info {
                padding: 0.14rem 0.12rem;
                background: rgba(255, 255, 255, 1);

                .item-title {
                    font-size: 0.28rem;
                    font-weight: 400;
                    color: rgba(29, 32, 35, 1);
                    line-height: 0.4rem;
                }
                .item-desc {
                    margin-top: 0.16rem;
                    display: flex;
                    justify-content: space-between;
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(29, 32, 35, 1);
                    line-height: 0.24rem;
                    margin-bottom: 0.05rem;
                    .industry {
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(136, 144, 156, 1);
                        line-height: 0.24rem;
                    }
                }
            }
        }
    }

    .cooperation-container {
        padding-bottom: 0.8rem;
    }

    .brand-dialog-container {
        position: fixed;
        z-index: 106;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        transition: 0.3s;
        .brand-dialog {
            width: 7.02rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: -4px 0px 36px 0px rgba(5, 15, 30, 0.89);
            margin: 0 auto;
            margin-top: 3.5rem;
            padding: 0.2rem;
            .brand-header {
                display: flex;
                .brand-cover-img {
                    width: 1.4rem;
                    height: 1.88rem;
                    margin-right: 0.2rem;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                }
                .brand-info-wrap {
                    flex: 1;
                    .brand-title {
                        font-size: 0.28rem;
                        font-weight: 400;
                        color: rgba(29, 32, 35, 1);
                        line-height: 0.28rem;
                        margin-bottom: 0.2rem;
                        line-height: 0.32rem;
                    }
                    .brand-desc {
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(29, 32, 35, 1);
                        line-height: 0.3rem;
                        margin-bottom: 0.16rem;
                    }
                    .tags {
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(136, 144, 156, 1);
                        line-height: 0.24rem;
                    }
                }
            }

            .brand-content {
                margin-top: 0.2rem;
                font-size: 0.24rem;
                font-weight: 400;
                color: rgba(136, 144, 156, 1);
                line-height: 0.32rem;
            }
        }
    }
}
</style>
